<template>
    <!--头部-->
    <div class="main">
        <div class="main-content">
            <div class="container-fluid">
                <div class="headarea">
                    <div class="headarea-1">
                        <span class="mgl">收费类型：</span>
                        <el-select v-model="tradeType" class="m-2 sel" placeholder="全部">
                            <el-option v-for="item in tradeTypeList" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                        <span class="mgl">收费状态：</span>
                        <el-select v-model="status" class="m-2 sel" placeholder="全部">
                            <el-option v-for="item in statusList" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                        <span>日期：</span>
                        <el-date-picker v-model="date" type="daterange" range-separator="—" start-placeholder="起始日期"
                            end-placeholder="结束日期" @change="changeDate" />

                    </div>
                    <el-button style="margin-top: -5px;" class="btn" @click="search" type="primary">查询</el-button>
                </div>
            </div>
        </div>
    </div>
    <!--mian-->
    <div class="main-total">
        <div class="total">
            <div class="number">{{ totalData.totalAccount }}</div>
            <div class="font1">合计收入</div>
        </div>
        <div class="ftc">
            <div class="blueBg2 ">
                <div class="flh70 ">收支概况</div>
                <div class="flh34">
                    <div class="">{{ totalData.payMoney }}</div>
                    <div class="bwt">收费金额</div>
                </div>
                <div class="flh34">
                    <div class="">{{ totalData.releaseMoney }}</div>
                    <div class="bwt">退费金额</div>
                </div>
            </div>
            <div class="blueBg ">
                <div class="flh70 ">收入渠道</div>
                <div class="flh34">
                    <div class="">{{ totalData.clashTotal }}</div>
                    <div class="bwt">现金收入</div>
                </div>
                <div class="flh34">
                    <div class="">{{ totalData.alipayPayMoney }}</div>
                    <div class="bwt">支付宝收入</div>
                </div>
                <div class="flh34">
                    <div class="">{{ totalData.clashReleaseTotal }}</div>
                    <div class="bwt">现金退款</div>
                </div>
                <div class="flh34">
                    <div class="">{{ totalData.alipayReleaseMoney }}</div>
                    <div class="bwt">支付宝退款</div>
                </div>
            </div>
        </div>
    </div>
    <div class="echarts-box">
        <div ref="inout" :style="{ width: '350px', height: '300px' }"></div>
        <div ref="ina" :style="{ width: '350px', height: '300px' }"></div>
        <div ref="out" :style="{ width: '350px', height: '300px' }"></div>
    </div>
    <!--foot-->
    <div class="foot">
        <el-table :data="tableData" class="tb">
            <el-table-column property="id" label="序号" width="80" />
            <el-table-column property="tradeKind" label="类型" width="80">
                <template #default="scope">
                    <span type="primary" v-if="scope.row.tradeKind == 0">看诊</span>
                    <span type="success" v-if="scope.row.tradeKind == 1">挂号</span>
                </template>
            </el-table-column>
            <el-table-column property="seeDoctor.status" label="状态" width="80">
                <template #default="scope">
                    <span type="primary" v-if="scope.row.payKind == 0">退款</span>
                    <span type="success" v-if="scope.row.payKind == 1">支付</span>
                </template>
            </el-table-column>
            <el-table-column property="patientBank.bankName" label="姓名" width="80" />
            <el-table-column property="patientBank.age" label="年龄" width="80" />
            <el-table-column property="tradeMoney" label="应收" width="80" />
            <el-table-column property="alipay" label="支付宝" width="80" />
            <el-table-column property="tradeDate" label="日期" width="180" />
            <el-table-column property="seeDoctor.doctor" label="收费员" width="80" />
        </el-table>
        <!-- 分页器 -->
        <el-pagination small background layout="prev, pager, next" class="mt-4" v-model:page-size="pageSize"
            :total="tableTotal" @current-change="pageChange" />
    </div>
</template>

<script lang="ts" setup>
import axios from '@/utils/http';
import { Cpu } from '@element-plus/icons-vue';
import { onBeforeMount, onMounted, onUnmounted, ref } from 'vue';

//  echarts
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
echarts.use([PieChart]);
// 注册必须的组件
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
]);
const inout = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
const ina = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
const out = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
onMounted(
    () => {
        init()
    }
)
onUnmounted(() => {
    echarts.dispose;
});
function init() {
    // 基于准备好的dom，初始化echarts实例
    let myinout = echarts.init(inout.value);
    let myina = echarts.init(ina.value);
    let myout = echarts.init(out.value);
    // 指定图表的配置项和数据
    let option = {
        title: {
            text: '收支状态',
            left: 'center',
            top: 'top'
        },
        series: [
            {
                type: 'pie',
                data: [
                    {
                        value: totalData.value.payMoney,
                        name: '收费金额'
                    },
                    {
                        value: totalData.value.releaseMoney,
                        name: '退费金额'
                    }
                ],
                radius: ['40%', '70%']
            }
        ]
    };

    let option2 = {

        title: {
            text: '收入渠道',
            left: 'center',
            top: 'top'
        },
        series: [
            {
                type: 'pie',
                data: [
                    {
                        value: totalData.value.alipayPayMoney,
                        name: '支付宝收入'
                    },
                    {
                        value: totalData.value.clashTotal,
                        name: '现金收入'
                    }
                ],
                radius: ['40%', '70%']
            }
        ]
    };
    let option3 = {

        title: {
            text: '退款',
            left: 'center',
            top: 'top'
        },
        series: [
            {
                type: 'pie',
                data: [
                    {
                        value: totalData.value.alipayReleaseMoney,
                        name: '支付宝退款'
                    },
                    {
                        value: totalData.value.clashReleaseTotal,
                        name: '现金退款'
                    }
                ],
                radius: ['40%', '70%']
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myinout.setOption(option);
    myina.setOption(option2);
    myout.setOption(option);
}













const tradeType = ref()
const status = ref()
const dateStart = ref("")
const dateEnd = ref("")
const date = ref()
const tradeTypeList = [
    {
        value: '2',
        label: '全部',
    },
    {
        value: '0',
        label: '看诊',
    },
    {
        value: '1',
        label: '挂号',
    },
]
const statusList = [
    {
        value: '5',
        label: '全部',
    },
    {
        value: '0',
        label: '未支付',
    },
    {
        value: '1',
        label: '已支付',
    },
    {
        value: '2',
        label: '已退款',
    },
]
const changeDate = (dateList: any) => {
    console.log(dateList);
    if (dateList == null) {
        dateStart.value = ""
        dateEnd.value = ""
        return;
    }
    dateStart.value = new Date(dateList[0]).toLocaleDateString().replaceAll("/", "-") + " 00:00:00"
    dateEnd.value = new Date(dateList[1]).toLocaleDateString().replaceAll("/", "-") + " 00:00:00"
    console.log(dateStart.value, dateEnd.value);

}
onBeforeMount(() => {
    getData()
    getTableData({ currentPage: 1, pageSize: pageSize.value })
})
const pageChange = (currentPage: any) => {
    getTableData({ currentPage: currentPage, pageSize: pageSize.value })
}
const search = () => {
    getData()
    getTableData({ currentPage: 1, pageSize: pageSize.value })
}
const totalData = ref({
    "totalAccount": 0,
    "payMoney": 0,
    "releaseMoney": 0,
    "alipayPayMoney": 0,
    "alipayReleaseMoney": 0,
    "clashTotal": 0,
    "clashReleaseTotal": 0
})
const getData = async () => {
    await axios({
        url: "/data/revAndExp/showTotalAmount",
        method: "post",
        data: {
            startDate: dateStart.value,
            endDate: dateEnd.value,
            tradeKind: tradeType.value || 2,
            status: status.value || 5
        }
    }).then((res: any) => {
        totalData.value = res.data.data
    }).catch(err => {
        console.log(err);
    })
    init()
}
const tableTotal = ref(1)
const tableData = ref([])
const pageSize = ref(5)
const getTableData = async (page: any) => {
    await axios({
        url: "/data/revAndExp/showTradeInfo",
        method: "post",
        data: {
            currentPage: page.currentPage,
            pageSize: page.pageSize,
            startDate: dateStart.value,
            endDate: dateEnd.value,
            tradeKind: tradeType.value || 2,
            status: status.value || 5
        }
    }).then((res: any) => {
        console.log(res);
        tableData.value = res.data.data
        tableTotal.value = res.data.count
        // store.state.createTreat.patientInfo=res.data.data
    }).catch(err => {
        console.log(err);
    })
}


</script>

<style  scoped>
.sel {
    width: 90px;
}

.mgl {
    margin-left: 10px;
}

.foot {
    margin-top: 30px;
}

.bwt {
    border-top: 1px solid #fff;
}

.flh34 {
    margin-right: 60px !important;
    line-height: 34px;
    float: left;
}

.tb {
    margin-left: 10px;
}

.flh70 {
    margin-right: 60px !important;
    line-height: 70px;
    float: left;
}

.blueBg2 {
    margin: 10px 0;
    padding: 0 10px;
    min-height: 70px;
    background-color: #47c6c6 !important;
}

.font1 {
    width: 90%;
    border-top: 1px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
}

.number {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
}

.blueBg {
    margin: 10px 0;
    padding: 0 10px;
    min-height: 70px;
    background-color: #1fd273 !important;
}

.total {
    background-color: #faaf19;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff !important;
    width: 15%;
    height: 120px;
    padding: 15px;
    margin: 10px;
}

.main-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ftc {
    /* display: inline-block; */
    width: 80%;
    color: #fff !important;
    text-align: center !important;
}



.main-content {
    padding: 28px 0 20px 10px;
}

.headarea {
    padding: 10px;
    /* margin-bottom: 20px !important; */
    font-family: "sans-serif";
    font-size: 10px;
    color: #676a6d;
    /* margin: 0 0 20px; */
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
}

.headarea-1 {
    position: relative;
    display: inline-block;
    margin-right: 30px !important;
}

.input-1 {
    width: auto;
    display: inline-block;
    /* border-radius: 2px; */
    /* border-color: #eaeaea;
      background-color: #fcfcfc; */
    padding: 6px 12px;
    font-size: 10px;
    /* line-height: 1; */
    color: #555;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.echarts-box {
    height: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
</style>